<template>
  <div class="one-machine-with-multiple-controls-content">
    <div class="portal-textarea-container">
      <textarea
        class="portal-textarea"
        rows="5"
        v-model="socketUrl"
        placeholder="请输入联网地址"
      ></textarea>
      <div class="portal-opt-area">
        <div class="opt-btn" @click="scanCode">扫码</div>
      </div>
      <div class="portal-opt-area">
        <div class="opt-btn" @click="connectHandle()">
          {{ connect ? "断开联网" : "联网" }}
        </div>
      </div>
      <div class="portal-opt-area">
        <div class="opt-btn" @click="recordHandle">
          {{ recording ? "暂停录制" : "开始录制" }}
        </div>
      </div>
    </div>
    <div class="history-record-container">
      <div class="history-record-title">历史记录</div>
      <div class="history-record-list" v-if="historyList.length > 0">
        <div
          class="history-record-list-item"
          v-for="(item, index) in historyList"
          :key="index"
        >
          <svg
            t="1646903397439"
            class="connectState"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7559"
            width="200"
            height="200"
          >
            <path
              d="M969.586403 624.769747l-129.946199-130.564991c-34.911813-35.071501-77.458713-52.607251-127.401169-52.607251-50.830721 0-94.146121 18.30425-129.946199 55.172242l-54.912749-55.172242c36.568577-36.089513 54.912749-79.74425 54.912749-131.203743 0-50.172008-17.32616-92.678986-51.848733-127.361247L401.885195 53.246004C367.362622 17.795244 324.815721 0 274.484025 0c-49.942456 0-92.229864 17.406004-126.762417 52.098246l-91.850604 91.521247c-35.291072 34.682261-52.996491 77.179259-52.996492 127.351267 0 50.172008 17.455906 92.928499 52.357739 128l129.946199 130.684757c34.901832 35.071501 77.458713 52.617232 127.40117 52.617232 50.830721 0 94.156101-18.30425 129.946198-55.172242l54.912749 55.172242c-36.688343 36.089513-54.912749 79.74425-54.912749 131.203742 0 50.172008 17.32616 92.669006 51.858714 127.361248l128.538947 129.916257c34.522573 35.460741 76.949708 53.246004 127.40117 53.246004 49.942456 0 92.239844-17.406004 126.762417-52.227992l91.850604-91.521248c35.291072-34.692242 52.996491-77.179259 52.996492-127.361247 0.019961-50.042261-17.435945-92.798752-52.347759-128.119766zM460.790146 365.556023c-1.626823-1.337388-5.90846-5.938402-13.453723-13.813021-7.395556-7.575205-12.555478-12.924756-15.519688-15.599532-2.95423-2.525068-7.545263-6.237817-13.753139-10.838831-6.357583-4.601014-12.41575-7.724912-18.473918-9.511423-6.058168-1.77653-12.715166-2.664795-19.961014-2.664795-19.212476 0-35.620429 6.676959-49.223859 20.350253-13.603431 13.513606-20.250448 30.001404-20.250449 49.453412 0 7.28577 1.027992 13.97271 2.664796 20.050838 1.626823 5.938402 4.870487 12.325926 9.45154 18.563743 4.581053 6.237817 8.283821 10.998519 10.788928 13.813021 2.515088 2.824483 7.68499 8.024327 15.529668 15.589552 7.68499 7.575205 12.276023 12.026511 13.743158 13.513606-14.481715 15.010682-31.917661 22.585887-52.17809 22.585887-19.801326 0-36.069552-6.387524-49.223859-19.601715L110.145 315.952904C96.541569 302.429318 89.894551 285.951501 89.894551 266.489513c0-19.012865 6.647018-35.201248 20.250449-48.864562l106.591813-106.3423c14.042573-13.074464 30.300819-19.611696 49.223859-19.611696 19.222456 0 35.630409 6.68694 49.22386 20.350254l149.168655 150.755555c13.59345 13.513606 20.250448 30.001404 20.250448 49.463392-0.009981 20.350253-7.844678 38.165458-23.813489 53.315867z m455.849669 443.334113L809.62882 915.511891c-13.503626 12.824951-29.981442 19.082729-49.423469 19.082729-19.89115 0-36.209279-6.417466-49.42347-19.68156L561.034356 763.708382c-13.663314-13.573489-20.330292-30.12117-20.330292-49.653021 0-20.430097 8.014347-38.325146 24.043041-53.385731 1.626823 1.347368 6.078129 6.118051 13.503626 13.872904 7.425497 7.754854 12.615361 13.124366 15.589551 15.649435 2.964211 2.535049 7.565224 6.257778 13.793061 10.888733 6.387524 4.620975 12.475634 7.904561 18.553762 9.541364 6.088109 1.936218 12.765068 2.684756 20.040858 2.684757 19.29232 0 35.770136-6.716881 49.423469-20.430098 13.653333-13.573489 20.330292-30.12117 20.330293-49.653021 0-7.305731-1.037973-14.012632-2.674776-20.130683-1.626823-5.958363-4.900429-12.375828-9.501442-18.643586-4.601014-6.257778-8.164055-10.888733-10.838831-13.862924-2.525068-2.844444-7.714932-8.054269-15.579571-15.659415-7.714932-7.605146-12.315945-12.076413-13.803041-13.563509 14.541598-15.509708 32.057388-23.414269 52.397661-23.414269 19.29232 0 35.760156 6.716881 49.413489 20.430097l151.384328 152.102924c13.653333 13.563509 20.330292 30.111189 20.330292 49.653022 0.009981 19.082729-6.816686 35.490682-20.470019 48.754775z"
              p-id="7560"
              :fill="connectStateColor(item[1])"
            ></path>
          </svg>
          <div class="name">{{ item[0] }}</div>
          <div
            class="opt-btn"
            :style="`background-color:${item[1] === 'connect' ? '#d81e06' : '#28af31'}`"
            @click="connectHandle(item[0])"
          >
            {{ item[1] === "connect" ? "断开连接" : "连接" }}
          </div>
          <img
            class="delBtn"
            @click="delHistory(item[0])"
            src=""
            alt=""
            srcset=""
          />
        </div>
      </div>
      <div class="history-record-list-empty" v-else>暂无</div>
    </div>
  </div>
</template>

<script>
import { $bus } from "../../assets/util";
export default {
  data() {
    return {
      recording: false,
      socketUrl: "",
      historyList: [],
      testSocket: null,
    };
  },
  watch: {
    socketHistoryList: {
      handler: function (newVal, oldVal) {
        this.historyList = newVal && [...newVal] || [];
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    connect() {
      return this.$store.state.socketConnect;
    },
    isHost() {
      return this.$store.state.isHost;
    },
    socketHistoryList() {
      return this.$store.state.socketHistoryList;
    },
  },
  created() {
    let list = JSON.parse(localStorage.getItem("dokit-socket-history-list") || "[]");
    list.forEach((item) => {
      if (this.connect && item[0] === this.$store.state.socketUrl) {
        this.$store.state.socketHistoryList.set(item[0], "connect");
        this.socketUrl = this.$store.state.socketUrl;
      } else {
        this.$store.state.socketHistoryList.set(item[0], "close");
      }
    });
    $bus.on("scanCode", this.scanCodeCallback);
  },
  destroyed() {
    $bus.off("scanCode", this.scanCodeCallback);
  },
  methods: {
    recordHandle() {},
    connectHandle(url) {
      if (this.$store.state.socketConnect) {
        this.$store.state.socketConnect = false;
        return;
      }
      if (
        (url && !/^(ws?s:\/\/)/.test(url)) ||
        (this.socketUrl && !/^(ws?s:\/\/)/.test(this.socketUrl))
      ) {
        this.$toast("url地址格式不对", 1000);
        return;
      }
      try {
        this.testSocket = new WebSocket(url || this.socketUrl);
        this.testSocket.addEventListener("error", (e) => {
          this.$toast("url地址无法连接", 2000);
          this.testSocket.close();
          this.testSocket = null;
        });
        this.testSocket.addEventListener("open", (e) => {
          url && (this.socketUrl = url);
          this.$store.state.socketUrl = this.socketUrl;
          this.$nextTick(() => {
            this.$store.state.socketConnect = !this.$store.state.socketConnect;
            this.$store.state.socketConnect && (this.$store.state.showContainer = false);
          });
          this.testSocket.close();
          this.testSocket = null;
        });
      } catch (error) {
        this.$toast("url地址无法连接", 1000);
        return;
      }
    },
    scanCode() {
      this.$router.push({
        name: "scanCode",
        params: { multiControl: true },
      });
    },
    scanCodeCallback(e) {
      this.$router.back();
      this.socketUrl = e;
      this.connectHandle();
    },
    delHistory(key) {
      this.$store.state.socketHistoryList.delete(key);
    },
    connectStateColor(value) {
      if (value === "connect") {
        return "#1afa29";
      } else {
        return "#d81e06";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.one-machine-with-multiple-controls-content {
  padding: 5px;
  textarea {
    font-size: 13px;
  }
  .portal-textarea-container {
    .portal-textarea {
      font-size: 13px;
      border-radius: 5px;
      box-sizing: border-box;
      width: 100%;
      border: 1px solid #d6e4ef;
      resize: vertical;
    }
    .portal-opt-area {
      margin-top: 5px;
      height: 32px;
      line-height: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .opt-btn {
        background-color: #337cc4;
        border-radius: 5px;
        font-size: 16px;
        width: 100%;
        text-align: center;
        color: #fff;
      }
    }
  }
  .history-record-container {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #d6e4ef;
    .history-record-title {
      text-align: center;
      font-size: 18px;
      color: #2c405a;
      margin-bottom: 20px;
    }
    .history-record-list-item {
      margin-top: 5px;
      background-color: #337cc4;
      border-radius: 5px;
      color: #fff;
      padding: 5px;
      display: flex;
      align-items: center;
      .delBtn {
        width: 15px;
        height: 15px;
      }
      .name {
        word-break: break-all;
        margin-right: 5px;
        font-size: 15px;
      }
      .connectState {
        width: 20px;
        height: 20px;
        margin-right: 7px;
      }
      .opt-btn {
        border-radius: 5px;
        font-size: 16px;
        text-align: center;
        color: #fff;
        white-space: nowrap;
        padding: 2px 15px;
        margin-right: 5px;
      }
    }
    .history-record-list-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 30px;
      font-size: 17px;
    }
  }
}
</style>
